<template>
  <div>
    <van-nav-bar title="我的购物车" left-text="返回" @click-left="onClickLeft" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- vant空状态 -->
    <van-empty v-show="isShow" description="购物车目前还没有商品" image="https://img.yzcdn.cn/vant/custom-empty-image.png">
      <van-button plain type="danger" class="bottom-button" @click="home">
        去购物
      </van-button>
    </van-empty>
    <div class="app-container">
      <div v-for="(item,index) in cartList">
        <van-checkbox-group v-model="result" @change="checkNum">
          <van-row style="background-color: white;">
            <van-col span="2" :offset="1" style="margin-top: 35px;">
              <van-checkbox :name="item"></van-checkbox>
            </van-col>
            <van-col span="21">
              <van-swipe-cell>

                <van-card :price="item.goodsPrice" :desc="item.remark" :title="item.goodsName"
                  :thumb="baseUrl+item.image" class="goods-card">
                  <template #num>
                    <van-stepper v-model="item.goodsNum" @change="changeNum" />
                  </template>

                </van-card>

                <template #right>
                  <van-button @click="del(item,item.id,index)" square text="删除" type="danger" class="delete-button" />
                </template>

              </van-swipe-cell>

            </van-col>

          </van-row>
        </van-checkbox-group>

      </div>

      <!-- vant提交订单栏 -->
      <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit(result)">
        <van-checkbox v-model="checkedAll" @click="checkAll">全选</van-checkbox>
      </van-submit-bar>

    </div>
  </div>
</template>
<script>
import { mycart, delCart } from "@/api/goods/cart"
export default {
  data () {
    return {
      checked0: false,
      checkedall: false,
      userInfo: [],
      cartList: [],
      result: [], //所有复选框选中的商品
      checkedAll: false, //全选的状态
      total: 0, //总价
      isShow: true
    }
  },
  created: function () {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    if (this.userInfo == null) {
      this.$router.push("/login")
    } else {
      mycart({ userId: this.userInfo.id }).then(res => {
        this.cartList = res.rows
        if (this.cartList.length > 0) { //显示或隐藏空状态
          this.isShow = false
        } else {
          this.isShow = true
        }
      })
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    home () {
      this.$router.push('/')
    },
    changeNum () {
      this.checkNum()
    },
    checkNum () {
      this.total = 0
      this.result.map(item => {
        this.total += item.goodsPrice * 100 * item.goodsNum
      })
      if (this.result.length == this.cartList.length) {
        this.checkedAll = true
      } else {
        this.checkedAll = false
      }

    },
    // 全选
    checkAll () {
      if (this.checkedAll) {
        this.result = this.cartList
      } else {
        this.result = []
      }
    },
    onSubmit (result) {
      this.$router.push({ name: 'createOrder', params: { orderList: result } })
    },
    del (item, id, index) { //删除
      if (this.result.includes(item)) {
        this.$notify({ type: 'danger', message: '请取消选择商品' });
      } else {
        this.cartList.splice(index, 1)
        this.checkedAll = this.result.length == this.cartList.length
        delCart(id).then(res => {
          console.log(res)
        })
      }
      if (this.cartList.length > 0) {
        this.isShow = false
      } else {
        this.isShow = true
        this.checkedAll = false
      }

    },

  }
}
</script>
<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  margin-top: 10px;
  font-size: 15px;
  align-items: center;
}
.goods-card {
  z-index: 1;
  margin: 0;
  padding: 10px 10px 20px 0px;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
.check {
  z-index: 1;
  margin-top: 40px;
  margin-left: 10px;
}
</style>